<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <title>{{#if title}}{{title}} - {{/if}}{{#if category}}{{category.name}} - {{/if}}{{siteInfo.title}}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="generator" content="NodeJS">
  <meta name="keywords" content="{{#if category}}{{category.keywords}},{{/if}}{{siteInfo.keywords}}">
  <meta name="description" content="{{#if category}}{{category.description}} —— {{/if}}{{siteInfo.description}}">
  <link rel="stylesheet" href="/themes/{{siteInfo.theme}}/assets/css/main.css" />
  <script src="/themes/{{siteInfo.theme}}/assets/js/jquery-2.2.1.min.js"></script>
  <script src="/themes/{{siteInfo.theme}}/assets/js/bootstrap.min4.js"></script>
  <link rel="stylesheet" href="/themes/{{siteInfo.theme}}/assets/css/bootstrap.min4.css" />
  <link rel="stylesheet" href="/themes/{{siteInfo.theme}}/assets/css/mymain.css" />


  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  {{{siteInfo.codeHeader}}}
</head>

<body>
  {{> navigation}}
  {{{body}}}
  <script>
    // 给table加样式
    var table = $("table");
    Array.from(table).forEach((i) => (i.className = "table"));
    //根据文章内容生成右边大纲
    var res = $("h2,h3");
    var resStr = '';
    //h标签内容转为a标签
    function getAtag(id, type, content) {
      var classname = "suboutline";
      if (type == "H2") {
        classname = "mainoutline";
      }
      return `<li class=${classname} onclick=flagcurrent(${id})><a href=#${id}>${content}</a></li>`;
    }
      Array.from(res).forEach((i, index) => {
        i.id = i.id + index;
        resStr+=getAtag(i.id, i.tagName, i.innerHTML)
      });
      //标记当前点击元素并移除其他元素标记
      function flagcurrent(e) {
        var res = $('#outline li a')
        Array.from(res).forEach(i=>{
          if(e == i.hash.slice(1)){
            $(i).addClass('leftCurrent')
          }else{
            $(i).removeClass('leftCurrent')
          }
        })
      }
      $("#outline").html(resStr);

  </script>
</body>

</html>